<template>
  <div class="dingding">
    <el-tabs v-model="activeTabValue">
      <el-tab-pane label="工程师在线模块" name="1">
        <!--<EngineerOnlineModule></EngineerOnlineModule>-->
      </el-tab-pane>
      <el-tab-pane label="一键保修模块" name="2">
        <!--<OneButtonRepair></OneButtonRepair>-->
      </el-tab-pane>
      <el-tab-pane label="保修/配置/驱动模块" name="3">
        <!--<WCDriverModule></WCDriverModule>-->
      </el-tab-pane>
      <el-tab-pane label="数据恢复模块" name="4">
        <!--<DataRecoveryModule></DataRecoveryModule>-->
      </el-tab-pane>
      <el-tab-pane label="多品牌维保模块" name="5">
        <!--<MultiModule></MultiModule>-->
      </el-tab-pane>
      <el-tab-pane label="工单模块" name="6">
        <!--<JobModule></JobModule>-->
      </el-tab-pane>
      <el-tab-pane label="我的模块" name="7">
        <!--<MyModule></MyModule>-->
      </el-tab-pane>
      <el-tab-pane label="联系我们模块" name="8">
        <!--<ContactOurModule></ContactOurModule>-->
      </el-tab-pane>
      <el-tab-pane label="软件服务支持范围模块" name="9">
        <!--<SoftwareModule></SoftwareModule>-->
      </el-tab-pane>
      <el-tab-pane label="Dashboard" name="10"></el-tab-pane>

    </el-tabs>
    <component :is="currentTabComponent"></component>
  </div>
</template>

<script>
  import EngineerOnlineModule from './components/EngineerOnlineModule'
  import OneButtonRepair from './components/OneButtonRepair'
  import WCDriverModule from './components/WCDriverModule'
  import DataRecoveryModule from './components/DataRecoveryModule'
  import MultiModule from './components/MultiModule'
  import JobModule from './components/JobModule'
  import MyModule from './components/MyModule'
  import ContactOurModule from './components/ContactOurModule'
  import SoftwareModule from './components/SoftwareModule'
  import DBNail from './components/DBNail'

  export default {
    name: "dingding",
    data() {
      return {
        activeTabValue: '1'
      }
    },
    components: {
      page1: EngineerOnlineModule,
      page2: OneButtonRepair,
      page3: WCDriverModule,
      page4: DataRecoveryModule,
      page5: MultiModule,
      page6: JobModule,
      page7: MyModule,
      page8: ContactOurModule,
      page9: SoftwareModule,
      page10: DBNail,
    },
    computed: {
      currentTabComponent: function () {
        return 'page' + this.activeTabValue
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dingding {
    background-color: #fff;
  }
</style>
<style lang="scss">
  .dingding {
    margin: 16px 20px;
    .el-tabs {
      box-shadow: 0 2px 10px 0 rgba(226, 224, 234, 0.6);
      border-radius: 6px;
      border: 1px solid #e6ebf5;
      .el-tabs__header {
        margin-bottom: 0;
        .el-tabs__item {
          height: 50px;
          line-height: 50px;
          font-family: MicrosoftYaHei;
          font-size: 16px;
        }
      }
      /*.table-wrap {*/
        /*.el-table__body-wrapper {*/
          /*.cell {*/
            /*padding: 10px 0;*/
          /*}*/
        /*}*/
      /*}*/
    }
  }
</style>
